import React, { useState } from 'react'
import { Button } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ImageText from './imageText'
import Image from './image'
import Text from './text'

import Right from './right/index'

export default () => {

    const [data, setData] = useState({
        nav_type: 1,
        bg_color: "white",
        font_color: "black",
        nav_hover: true
    })

    const [navList, setNavList] = useState([
        { title: "首页", url: "http://uniapp.b2b2c.niuteam.cn/upload/0/images/20200313/20200313102059-77687275078.png" },
        { title: "分类", url: "http://uniapp.b2b2c.niuteam.cn/upload/0/images/20200313/20200313102054-77687810662.png" },
        { title: "购物车", url: "http://uniapp.b2b2c.niuteam.cn/upload/common/images/20200320/20200320022754-15725783078.png" },
        { title: "个人中心", url: "http://uniapp.b2b2c.niuteam.cn/upload/common/images/20200320/20200320022749-15726302680.png" },
    ])

    return (
        <PageHeaderWrapper title={false}>
            <div style={{
                width: "320px", marginLeft: "20px",
                position: "relative", height: "100%"
            }}>
                <div style={{ border: "1px solid #E5E5E5", backgroundColor: "white", position: "relative" }}>
                    <img
                        src="http://uniapp.b2b2c.niuteam.cn/public/static/ext/diyview/img/preview_head.png"
                        alt="" style={{ width: "100%" }}
                    />
                    <nav style={{
                        position: "absolute", fontSize: "16px", color: "white", top: "28px",
                        fontWeight: 600, left: "50%", transform: "translateX(-50%)"
                    }}>
                        底部导航
                    </nav>
                    <div style={{ marginTop: "100px", borderTop: "1px solid #E5E5E5" }}>
                        {data.nav_type === 1 && <ImageText data={data} navList={navList} />}
                        {data.nav_type === 2 && <Image data={data} navList={navList} />}
                        {data.nav_type === 3 && <Text data={data} navList={navList} />}
                    </div>
                </div>
                <Right
                    data={data}
                    setData={(d: any) => setData(d)}
                    navList={navList}
                    setNavList={(d: any) => setNavList(d)}
                />
                <div style={{ textAlign: "center", padding: "15px" }}>
                    <Button type="primary">保存</Button>
                </div>
            </div>
        </PageHeaderWrapper>
    )
}